<template>
  <div ref="chartRef"
       class="gauge-container"
       style="width: 100%; height: 300px"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  title: { type: String, required: true }, // 标题（如“C盘使用率”）
  value: { type: Number, required: true }, // 使用率（0-100）
  color: { type: String, default: '#1890ff' }, // 主色
  unit: { type: String, default: 'GB' }, // 单位
});

const chartRef = ref<HTMLDivElement | null>(null);
let myChart: echarts.ECharts | null = null;

onMounted(() => initChart());
watch([props.title, props.value, props.color, props.unit], () => initChart());

function initChart() {
  if (!chartRef.value) return;
  myChart = echarts.init(chartRef.value);

  const option: echarts.EChartsOption = {
    title: {
      text: props.title,
      left: 'center',
      top: '5%',
      textStyle: { fontSize: 16, color: '#333' },
    },
    series: [
      {
        type: 'gauge',
        radius: '80%', // 仪表盘半径（占容器比例）
        center: ['50%', '60%'], // 中心位置
        startAngle: 180, // 起始角度（上半圆）
        endAngle: 0, // 结束角度（下半圆）
        min: 0,
        max: 100, // 值域
        splitNumber: 10, // 大刻度数量（每10%一个大刻度）

        // 大刻度线（splitLine）
        splitLine: {
          show: true,
          length: 20, // 大刻度长度
          lineStyle: {
            color: '#ccc', // 颜色
            width: 3, // 宽度
            shadowBlur: 2, // 阴影模糊
            shadowColor: '#ddd', // 阴影颜色
          },
        },

        // 小刻度线（axisTick）
        axisTick: {
          show: true,
          length: 10, // 小刻度长度
          lineStyle: {
            color: '#eee', // 颜色（比大刻度浅）
            width: 1, // 宽度
          },
          interval: (idx: number) => idx % 5 !== 0, // 隐藏大刻度位置的小刻度
        },

        // 刻度标签（axisLabel）
        axisLabel: {
          show: true,
          color: '#666', // 文字颜色
          distance: 35, // 距离仪表盘的距离
          formatter: '{value}%', // 显示百分比
          fontSize: 12, // 文字大小
        },

        // 指针（增强动态感）
        pointer: {
          show: true,
          length: '75%', // 指针长度（占半径比例）
          lineStyle: {
            color: props.color, // 颜色与主色一致
            width: 4, // 宽度
          },
          shadowBlur: 5, // 指针阴影
          shadowColor: props.color + '40', // 半透明阴影
        },

        // 进度条（主环）
        progress: {
          show: true,
          width: 18, // 进度条宽度
          roundCap: true, // 圆角收尾
        },

        // 主环背景
        axisLine: {
          lineStyle: {
            width: 18, // 背景环宽度
            color: [[1, '#f0f0f0']], // 背景色
          },
        },

        // 数值详情
        detail: {
          valueAnimation: true,
          fontSize: 36,
          formatter: function (value) {
            return `{value|${value}%}\n{unit|${props.unit}}`;
          },
          rich: {
            value: {
              fontSize: 36,
              fontWeight: 'bold',
              color: '#333',
            },
            unit: {
              fontSize: 14,
              color: '#999',
              padding: [5, 0, 0, 0],
            },
          },
          offsetCenter: [0, '30%'],
        },

        // 数据
        data: [{ value: props.value }],
      },
    ],
  };

  myChart.setOption(option);
  window.addEventListener('resize', () => myChart?.resize());
}
</script>

<style scoped>
.gauge-container {
  min-width: 240px; /* 保证小屏显示完整 */
}
</style>